<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告中心 - 鲜时蔬</title>
    <!-- 核心依赖 -->
    <!-- 引入Vue.js -->
    <script src="../../js/vue.js"></script>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="../../css/index.css">
    <!-- 引入Element UI组件库 -->
    <script src="../../js/index.js"></script>
    <!-- 引入axios -->
    <script src="../../js/axios.min.js"></script>


    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #f5f5f5; color: #333; }
        .container { width: 1140px; margin: 0 auto; padding: 0 15px; }
        @media (max-width: 1199px) { .container { width: 960px; } }
        @media (max-width: 991px) { .container { width: 720px; } }
        @media (max-width: 767px) { .container { width: 100%; } }

        /* 导航栏 */
        .header { background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
        .header-content { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
        .logo { display: flex; align-items: center; font-size: 20px; font-weight: bold; color: #27ae60; text-decoration: none; }
        .logo i { margin-right: 8px; }
        .nav { display: flex; }
        .nav a { margin: 0 15px; text-decoration: none; color: #666; font-size: 14px; padding: 5px 0; }
        .nav a.active { color: #27ae60; border-bottom: 2px solid #27ae60; }
        .user-actions { display: flex; align-items: center; position: relative; }
        .user-actions button { margin-left: 15px; background: none; border: none; color: #666; cursor: pointer; font-size: 14px; display: flex; align-items: center; }
        .user-actions button i { margin-right: 5px; }

        /* 用户信息下拉菜单 */
        .user-info { position: relative; display: flex; align-items: center; cursor: pointer; }
        .user-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: #27ae60; color: white; display: flex; align-items: center; justify-content: center; margin-right: 8px; font-size: 14px; }
        .user-dropdown { position: absolute; top: 100%; right: 0; background: white; box-shadow: 0 2px 12px rgba(0,0,0,0.1); border-radius: 4px; padding: 5px 0; min-width: 120px; z-index: 10; margin-top: 5px; display: none; }
        .user-dropdown.show { display: block; }
        .user-dropdown-item { padding: 8px 15px; font-size: 14px; color: #606266; cursor: pointer; }
        .user-dropdown-item:hover { background-color: #f5f7fa; color: #27ae60; }

        /* 主内容区 */
        .main { padding-top: 80px; padding-bottom: 50px; }

        /* 页脚 */
        .footer { background: #333; color: #fff; padding: 30px 0; margin-top: 50px; }
        .footer-content { text-align: center; font-size: 14px; }

        /* 回到顶部 */
        .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 40px; height: 40px; border-radius: 50%; background: #27ae60; color: #fff; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 999; }
        .back-to-top.show { display: flex; }

        /** 页面专属样式 */
        body{
            background:#f5f5f5;
            font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
        }
        .notice-wrap{
            min-height:calc(100vh - 160px);
            padding:30px 0 60px;
            padding-top: 80px; padding-bottom: 50px;

        }
        .notice-card{
            background:#fff;
            border-radius:8px;
            box-shadow:0 2px 12px rgba(0,0,0,.06);
            overflow:hidden;
        }
        .notice-header{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:24px 32px;
            border-bottom:1px solid #ebeef5;
        }
        .notice-header h2{
            margin:0;
            font-size:22px;
            color:#303133;
            display:flex;
            align-items:center;
        }
        .notice-header h2 i{
            margin-right:10px;
            color:#27ae60;
        }

        /* 列表 */
        .notice-list{
            padding:12px 32px 32px;
        }
        .notice-item{
            display:flex;
            align-items:flex-start;
            padding:20px 0;
            border-bottom:1px solid #f0f0f0;
            cursor:pointer;
            transition:background .2s;
        }
        .notice-item:hover{
            background:#fafafa;
        }
        .notice-item:last-child{
            border-bottom:none;
        }
        .notice-tag{
            flex-shrink:0;
            width:48px;
            height:22px;
            line-height:22px;
            text-align:center;
            border-radius:4px;
            font-size:12px;
            margin-right:16px;
            margin-top:2px;
        }
        .tag-urgent{
            background:#fef0f0;
            color:#f56c6c;
        }
        .tag-normal{
            background:#f0f9ff;
            color:#409eff;
        }
        .tag-system{
            background:#f6f7f8;
            color:#909399;
        }
        .notice-main{
            flex:1;
            min-width:0;
        }
        .notice-title{
            font-size:16px;
            color:#303133;
            margin-bottom:6px;
            display:flex;
            align-items:center;
        }
        .notice-title .unread-dot{
            width:6px;
            height:6px;
            background:#f56c6c;
            border-radius:50%;
            margin-left:8px;
        }
        .notice-summary{
            font-size:14px;
            color:#606266;
            line-height:1.6;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .notice-time{
            font-size:13px;
            color:#909399;
            margin-top:8px;
            display:flex;
            align-items:center;
        }
        .notice-time i{
            margin-right:4px;
        }

        /* 空态 */
        .empty-box{
            padding:80px 0;
            text-align:center;
        }
        .empty-box i{
            font-size:80px;
            color:#dcdfe6;
        }
        .empty-box p{
            margin-top:16px;
            color:#909399;
        }

        /* 分页 */
        .pagination-box{
            display:flex;
            justify-content:center;
            padding:24px 0 8px;
        }

        /* 详情抽屉 */
        .notice-detail h3{
            margin:0 0 16px;
            font-size:18px;
            color:#303133;
            line-height:1.4;
        }
        .notice-detail .detail-meta{
            display:flex;
            align-items:center;
            font-size:13px;
            color:#909399;
            padding-bottom:16px;
            border-bottom:1px solid #ebeef5;
            margin-bottom:20px;
        }
        .notice-detail .detail-meta i{
            margin-right:4px;
        }
        .notice-detail .detail-meta span+span{
            margin-left:20px;
        }
        .notice-detail .detail-content{
            font-size:15px;
            color:#606266;
            line-height:1.8;
            white-space:pre-wrap;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- 导航栏（复用首页） -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <a href="index.html" class="logo">
                    <i class="el-icon-shopping-bag"></i>
                    <span>鲜时蔬</span>
                </a>
                <nav class="nav">
                    <a href="index.html">首页</a>
                    <a href="vegetables.html">蔬菜列表</a>
                    <a href="notice.html" class="active">公告中心</a>
                    <a href="contact.html">联系我们</a>
                </nav>
                <div class="user-actions">
                    <template v-if="isLoggedIn">
                        <div class="user-info" @mouseenter="showDropdown=true" @mouseleave="showDropdown=false">
                            <div class="user-avatar">{{ userInfo.nickName?userInfo.nickName.charAt(0):userInfo.userName.charAt(0) }}</div>
                            <span>{{ userInfo.nickName||userInfo.userName }}</span>
                            <div class="user-dropdown" :class="{show:showDropdown}">
                                <div class="user-dropdown-item" @click="goToPersonalCenter">个人中心</div>
                                <div class="user-dropdown-item" @click="logout">退出登录</div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <button @click="goToLogin"><i class="el-icon-user"></i> 登录</button>
                    </template>
                    <button @click="goToCart">
                        <i class="el-icon-shopping-cart"></i> 购物车({{ cartCount }})
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主体 -->
    <main class="notice-wrap">
        <div class="container">
            <div class="notice-card">
                <div class="notice-header">
                    <h2><i class="el-icon-message"></i> 公告中心</h2>
                    <el-input placeholder="请输入公告关键词"
                              v-model="keyword"
                              style="width:260px"
                              clearable
                              @clear="loadNotice"
                              @keyup.enter.native="loadNotice"
                              prefix-icon="el-icon-search"></el-input>
                </div>

                <div class="notice-list" v-loading="loading">
                    <div v-if="noticeList.length">
                        <div class="notice-item" v-for="n in noticeList" :key="n.noticeId" @click="showDetail(n)">
                            <div class="notice-tag" :class="'tag-'+n.noticeType">{{ getTypeLabel(n.noticeType) }}</div>
                            <div class="notice-main">
                                <div class="notice-title">
                                    {{ n.noticeTitle }}
                                    <span class="unread-dot" v-if="!n.read"></span>
                                </div>
                                <div class="notice-summary">{{ getSummary(n.noticeContent) }}</div>
                                <div class="notice-time">
                                    <i class="el-icon-time"></i>{{ formatTime(n.createTime) }}
                                    <span style="margin-left: 15px;"><i class="el-icon-view"></i> 浏览: {{ n.viewCount || 0 }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-else class="empty-box">
                        <i class="el-icon-document-delete"></i>
                        <p>暂无公告</p>
                    </div>
                </div>

                <div class="pagination-box">
                    <el-pagination background
                                   layout="prev, pager, next"
                                   :total="total"
                                   :page-size="pageSize"
                                   :current-page="pageNo"
                                   @current-change="handlePageChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </main>

    <!-- 公告详情抽屉 -->
    <el-drawer title="公告详情" :visible.sync="drawer" size="600px" :with-header="false">
        <div class="notice-detail" v-if="currentNotice" style="padding:24px">
            <h3>{{ currentNotice.noticeTitle }}</h3>
            <div class="detail-meta">
                <span><i class="el-icon-user"></i>{{ currentNotice.createBy || '管理员' }}</span>
                <span><i class="el-icon-time"></i>{{ formatTime(currentNotice.createTime) }}</span>
                <span><i class="el-icon-view"></i>{{ currentNotice.viewCount || 0 }} 次阅读</span>
            </div>
            <div class="detail-content">{{ currentNotice.noticeContent }}</div>
        </div>
    </el-drawer>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p>© 2025 鲜时蔬 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>
</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                isLoggedIn:false,// 登录状态
                userInfo:{},// 用户信息
                showDropdown:false,// 控制下拉菜单显示
                cartCount:0,// 购物车数量
                loading:false,
                keyword:'',
                pageNo:1,
                pageSize:10,
                total:0,
                noticeList:[],
                drawer:false,
                currentNotice:null
            }
        },
        mounted(){
            this.checkLogin();
            this.loadNotice();
            this.fetchCartCount();
        },
        methods:{
            checkLogin(){
                axios.get('/vegetablemarketexpress/user/checkLoginStatus',{withCredentials:true})
                    .then(res=>{
                        if(res.data.code===200&&res.data.data){
                            this.isLoggedIn=true;
                            this.userInfo=res.data.data;
                        }
                    })
            },
            loadNotice(page=1){
                //this.pageNo=page;
                this.loading=true;
                const params={
                    pageNo:this.pageNo,
                    pageSize:this.pageSize,
                    data:{
                        status:'0',// 只查询已发布的公告
                        noticeTitle:this.keyword||undefined
                    }
                };
                axios.post('/vegetablemarketexpress/notice/queryByPage',params)
                    .then(res=>{
                        if(res.data.code===200){
                            this.noticeList=res.data.data.list||[];
                            this.total=res.data.data.total||0;
                            // 简单已读标记（实际应按用户存储）
                            this.noticeList.forEach(n=>{
                                n.read=!!localStorage.getItem('notice_read_'+n.noticeId);
                            });
                        }
                    })
                    .finally(()=>this.loading=false);
            },
            showDetail(notice){
                this.currentNotice=notice;
                this.drawer=true;
                if(!notice.read){
                    notice.read=true;
                    localStorage.setItem('notice_read_'+notice.noticeId,'1');
                }
                // 更新浏览量
                axios.put('/vegetablemarketexpress/notice/view?noticeId='+ notice.noticeId).then(res => {
                    if (res.data.code === 200) {
                        // 更新当前公告的浏览量
                        this.currentNotice.viewCount = res.data.data.viewCount;
                        // 同时更新列表中的对应公告的浏览量
                        const index = this.noticeList.findIndex(n => n.noticeId === notice.noticeId);
                        if (index !== -1) {
                            this.noticeList[index].viewCount = res.data.data.viewCount;
                            // 使用Vue.set确保响应式更新
                            Vue.set(this.noticeList, index, {...this.noticeList[index]});
                        }
                    }
                }).catch(() => {});
            },
            getTypeLabel(type) {
                const typeMap = {
                    'urgent': '紧急',
                    'normal': '普通',
                    'system': '系统'
                };
                return typeMap[type] || '公告';
            },
            getSummary(content) {
                // 提取纯文本摘要
                if (!content) return '';
                const text = content.replace(/<[^>]*>/g, ''); // 去除HTML标签
                return text.length > 60 ? text.substring(0, 60) + '...' : text;
            },
            formatTime(t){
                const d=new Date(t);
                const now=new Date();
                const diff=now-d;
                if(diff<60000)return'刚刚';
                if(diff<3600000)return Math.floor(diff/60000)+'分钟前';
                if(diff<86400000)return Math.floor(diff/3600000)+'小时前';
                return d.toLocaleDateString();
            },
            goToLogin(){location.href='login.html'},
            goToCart(){location.href='cart.html'},
            goToPersonalCenter(){location.href='/vegetablemarketexpress/html/front/personalCenter.html'},
            logout(){
                axios.get('/vegetablemarketexpress/user/logout',{withCredentials:true})
                    .then(()=>{
                        this.$message.success('已退出登录');
                        setTimeout(() => this.goToLogin(), 1000);
                    })
            },
            /**
             *获取购物车数量
             */
            fetchCartCount() {
                axios.get('/vegetablemarketexpress/shoppingCart/count', {
                    withCredentials: true
                })
                    .then(res => {
                        console.log('购物车数据：', res.data.data); // 查看返回的购物车数据
                        if (res.data.code === 200) {
                            this.cartCount = res.data.data || 0;
                        }
                    })
                    .catch(err => {
                        console.error('购物车数量请求异常：', err);
                        this.cartCount = 0; // 异常时置为0
                    });
            },
            handlePageChange(newPage) {
                this.pageNo = newPage;
                this.loadNotice();
            },
        }
    })
</script>
</body>
</html>